
function initCanvas() {
    let canvas = document.getElementById("progress")
    let ctx = canvas.getContext("2d");
    let width = canvas.width;
    let height = canvas.height
    //优化抗锯齿
    canvas.style.width = width + 'px'
    canvas.style.height = height + 'px'
    canvas.height = height * window.devicePixelRatio
    canvas.width = width * window.devicePixelRatio
    ctx.scale(window.devicePixelRatio * 2, window.devicePixelRatio * 2)
    drawProgress()
    function drawProgress() {
        //不封闭路径
        ctx.beginPath();
        ctx.lineWidth = 1
        ctx.strokeStyle = '#808080'
        //起点x.起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针
        //总时长
        ctx.arc(75, 3, 55, 0.4, 0.875 * Math.PI, false);
        ctx.stroke();
    }
}
function progress() {
    let audio = document.getElementsByTagName("audio")[0];
    let progress_time = audio.currentTime
    let duration = audio.duration
    let num = (progress_time / duration) * 2.348
    let progress_num = 2.748 - num
    let canvas = document.getElementById("progress")
    let ctx = canvas.getContext("2d");
    drawProgress()
    function drawProgress() {
        //不封闭路径
        ctx.beginPath();
        ctx.lineWidth = 1
        ctx.strokeStyle = '#808080'
        //起点x.起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针
        //总时长
        ctx.arc(75, 3, 55, 0.4, 0.875 * Math.PI, false);
        ctx.stroke();
        ctx.beginPath();
        ctx.lineWidth = 1
        ctx.strokeStyle = "black"
        //进度条，2.748-->0.4
        ctx.arc(75, 3, 55, progress_num, 0.875 * Math.PI, false);
        ctx.stroke();
    }
}
export { progress, initCanvas }